<template>
  <div>
    <input class="test-input" @input="$emit('input', dataValue)" v-model="dataValue" />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: [Number, String]
    }
  },
  model: {
    prop: "value",
    event: "input",
  },
  data: () => ({
    dataValue: ''
  }),
  created(){
    this.dataValue = this.value
  },
  watch: {
    value: function(newVal) {
      console.log('this', this);
      this.dataValue = newVal
    }
  },
};
</script>
<style scoped>
.test-input {
  box-sizing: border-box;
  text-align: center;
  font-size: 1.4em;
  height: 2.7em;
  border-radius: 4px;
  border: 1px solid #c8cccf;
  color: #6a6f77;
  -web-kit-appearance: none;
  -moz-appearance: none;
  display: block;
  outline: 0;
  padding: 0 1em;
  text-decoration: none;
  width: 100%;
}
</style>